<template>
  <Modal v-model="show" title="按钮管理" :width="700">
    <Form ref="validForm" :model="formData" :rules="ruleValidate">
      <FormItem label="功能名" label-position="top">
        <Input placeholder="请输入功能名称" :modelValue="func.funcName" readonly/>
      </FormItem>

      <FormItem label="按钮名" label-position="top" prop="btnName" :error="error.btnName">
        <Input v-model="formData.btnName" placeholder="请输入按钮名称"/>
      </FormItem>

      <FormItem label="权限标识" label-position="top" prop="btnRemark" :error="error.remark">
        <Input v-model="formData.btnRemark" placeholder="请输入权限标识,例如 `add`, 会自动添加功能权限标识作为前缀">
          <template #prepend>
            <span>{{ func.remark }}</span>
          </template>
        </Input>
      </FormItem>

      <FormItem label="状态" label-position="top" prop="state">
        <Switch size="large" v-model="formData.state">
          <template #open>
            <span>启用</span>
          </template>
          <template #close>
            <span>禁用</span>
          </template>
        </Switch>
      </FormItem>
    </Form>
    <template #footer>
      <Button style="margin-right: 8px" @click="show = false">关闭</Button>
      <Button type="primary" :loading="loading" @click="handleForm">保存</Button>
    </template>
  </Modal>
</template>

<script>


export default {
  props: {
    modelValue: {type: Boolean, required: true},
    func: {type: Object, required: true},
    btn: {type: Object, required: false, default: {btnName: "", remark: "", state: true}}
  },
  data() {
    return {
      error: {}, // 存储后台校验错误信息
      formData: {
        id: this.btn.id,
        btnName: this.btn.btnName,
        btnRemark: this.btn.remark.substring(this.func.remark.length + 1),
        state: this.btn.state
      },
      loading: false,
      ruleValidate: {
        btnName: [
          {required: true, message: "按钮名不允许为空", trigger: 'blur'},
          {type: "string", max: 100, message: "按钮名过长", trigger: 'blur'},
        ],
        btnRemark: [
          {required: true, message: "权限标识不能为空", trigger: 'blur'},
          {type: "string", pattern: /^\w+(:\w+)*?$/, message: "权限标识格式不正确", trigger: 'blur'},
        ],
        state: [
          {type: "boolean", message: "状态必须是一个boolean类型的值", trigger: "blur"}
        ]
      },
    }
  },
  emits: ["close-win", "update:model-value", "refresh-btn"],
  methods: {
    handleForm() {
      this.loading = true;
      this.error = {};
      this.$refs.validForm.validate(valid => {
        if (valid) {
          if (this.btn.id == null) {
            this.saveBtn();
          } else {
            this.updateBtn();
          }
        }
        this.loading = false;
      })
    },
    saveBtn() {
      this.$api.addBtn({
        btnName: this.formData.btnName,
        state: this.formData.state,
        remark: this.func.remark + ":" + this.formData.btnRemark,
        funcId: this.func.id,
      }).then(ret => {
        if (ret.data.status) {
          this.$tips.success("按钮保存成功");
          this.show = false;
          this.$emit("refresh-btn", this.func.id); // 保存成功，通知父组件刷新按钮列表
        } else {
          this.error = ret.data.error;
        }
      })

    },
    updateBtn() {
      this.$api.updateBtn({
        id: this.btn.id,
        btnName: this.formData.btnName,
        state: this.formData.state,
        remark: this.func.remark + ":" + this.formData.btnRemark,
        funcId: this.func.id,
      }).then(ret => {
        if (ret.data.status) {
          this.$tips.success("按钮修改成功");
          this.show = false;
          this.$emit("close-win", true) // 提示父组件刷新
        } else {
          this.error = ret.data.error;
        }
      })
    },
    resetValidForm() {
      this.$refs.validForm.resetFields();
      this.error = {};
    },
  },
  computed: {
    show: {
      set(newVal) {
        this.$emit("update:model-value", newVal);
      },
      get() {
        return this.modelValue;
      }
    },
  }
}
</script>

<style scoped>
.icon {
  vertical-align: middle;
  margin: 0 3px;;
}
</style>